<template>
  <!-- 无缝滚动效果 -->
  <vue-seamless-scroll :scrollList="scrollList" class="marquee-wrap" :class-option="classOption">
    <view class="marquee-list">
		 <!-- :class="{'animate-up': animateUp}" -->
	  <view class="flex align-center" v-for="(item, index) in scrollList" :key="index">
	  	<image class="marqueeAvatar" :src="item.avatar"></image>
	  	<text class="font-size-16">儿童{{item.name}}申请了帮扶</text>
	  </view>
    </view>
  </vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: { //组件
	vueSeamlessScroll
  },
  props: {
  	scrollList: {
  		type: Array,
  		default: []
  	},
  },
  data() {
    return {
      animateUp: false,
      timer: null
    }
  },
  computed: {
    classOption () {
	   return {
		   step: 0.2, // 数值越大速度滚动越快
		   limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
		   hoverStop: true, // 是否开启鼠标悬停stop
		   direction: 1, // 0向下 1向上 2向左 3向右
		   openWatch: true, // 开启数据实时监控刷新dom
		   singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
		   singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
		   waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
	   }
	}
  },
  mounted() {
    // this.timer = setInterval(this.scrollAnimate, 2000);
  },
  methods: {
    // scrollAnimate() {
    //   this.animateUp = true
    //   setTimeout(() => {
    //     this.scrollList.push(this.scrollList[0])
    //     this.scrollList.shift()
    //     this.animateUp = false
    //   }, 500)
    // }
  },
  destroyed() {
    // clearInterval(this.timer)
  }

};
</script>
<style scoped>
.marquee-wrap  {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  color: #fff;
  overflow: hidden;
  padding: 8rpx 20rpx;
  margin: 8rpx 20rpx;
}
.marquee-wrap .marquee-list li {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  list-style: none;
  color: #fff;
  font-weight: 400;
}
.marquee-wrap .animate-up {
	/* transition: all 0.5s;
	transform: translateY(-32px); */
}
.marqueeAvatar{
	width: 30rpx;
	height: 30rpx;
	border-radius: 15rpx;
}
</style>
